<template>
  <div class="creation-editor-page">
    <div class="header">
      <h1>智能创作 - 核心编辑器</h1>
      <p>模板 ID: {{ templateId }} | 纹理 ID: {{ textureId }}</p>
    </div>

    <!-- 主编辑区域 -->
    <div class="editor-main-area">
      <!-- 左侧: 画布区域 -->
      <div class="editor-canvas-container">
        <h2 class="section-title">创作画布预览</h2>

        <div v-if="loading" class="loading-state">
          <p>正在加载模板和纹理详情...</p>
        </div>

        <!-- ✅ 关键：将 ref 绑定到你想截图的容器上 -->
        <div v-else class="editor-canvas" ref="canvasContainerRef">
          <!-- 画布内容: 放置模板和纹理 -->
          <div class="canvas-content-wrapper">
            <!-- 居中放置的模板 -->
            <div class="template-center">
              <span class="label">主模板 ({{ templateDetails?.name || '未知' }})</span>
              <!-- 模拟模板外观 -->
              <img
                :src="templateDetails?.imageUrl || '/placeholder-template.jpg'"
                alt="Template Preview"
                class="template-image"
              />
            </div>

            <!-- 放置在四角的纹理 -->
            <div
              v-for="corner in ['top-left', 'top-right', 'bottom-left', 'bottom-right']"
              :key="corner"
              :class="['texture-corner', corner]"
              :style="{
                backgroundImage: `url(${textureDetails?.imageUrl || '/placeholder-texture.jpg'})`,
              }"
            >
              <span class="label">{{ textureDetails?.name || '纹理' }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧: 信息与操作面板 -->
      <div class="editor-sidebar">
        <h2 class="section-title">创作信息与操作</h2>

        <div class="info-card">
          <h3>🎨 已选纹理</h3>
          <p>名称: {{ textureDetails?.name || '加载中...' }}</p>
          <p>ID: {{ textureId }}</p>
        </div>

        <div class="info-card">
          <h3>🖼️ 模板详情</h3>
          <p>名称: {{ templateDetails?.name || '加载中...' }}</p>
          <p>ID: {{ templateId }}</p>
          <p>用户 ID: {{ userId }}</p>
        </div>

        <div class="settings-panel">
          <h3>⚙️ 自定义参数</h3>
          <textarea
            v-model="customizationData"
            rows="4"
            placeholder="输入自定义创作数据 (如颜色配置, 文本内容等)"
          ></textarea>
        </div>

        <!-- ✅ 新增：预览生成状态 -->
        <div
          v-if="isSaving && !saveStatus"
          style="
            padding: 10px;
            background-color: #ffe0b2;
            border-radius: 4px;
            text-align: center;
            margin-bottom: 10px;
          "
        >
          <p>
            <strong>🖼️ 正在生成图片并上传...</strong>
          </p>
        </div>

        <!-- 保存操作 -->
        <button @click="handleSaveCreation" :disabled="isSaving" class="btn-save">
          <!-- 修正保存中的文本 -->
          <span v-if="isSaving">💾 {{ saveStatus === 'success' ? '保存成功' : '处理中...' }}</span>
          <span v-else>✅ 提交并保存创作结果</span>
        </button>

        <p v-if="saveMessage" :class="saveStatus === 'success' ? 'success-msg' : 'error-msg'">
          {{ saveMessage }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import html2canvas from 'html2canvas'
// ✅ 从 userApi 导入 getCurrentUserId，并确保 creationApi 中没有重复导入
import {
  saveUserCreation,
  getTemplateDetails,
  getTextureDetails,
  uploadImageApi,
  // 移除：getCurrentUserIdApi,
} from '@/api/creationApi'
// 假设 userApi 中也导入了 axios
import { getCurrentUserId } from '@/api/userApi'

const route = useRoute()

// 从路由参数中获取 ID
const templateId = ref(parseInt(route.params.templateId))
const textureId = ref(parseInt(route.params.textureId))

// 状态变量
const loading = ref(true)
const isSaving = ref(false)
const saveMessage = ref('')
const saveStatus = ref('')

// ✅ DOM 引用：用于截图
const canvasContainerRef = ref(null)

// 数据模型
const userId = ref(2) // 模拟从认证信息中获取的用户 ID
const templateDetails = ref(null)
const textureDetails = ref(null)
// 🚨 字段名与后端实体保持一致 (customizationData)
const customizationData = ref('{"color": "#FF0000", "scale": 1.0}')
// 🚨 字段名与后端实体保持一致 (finalOutputUrl)
const finalOutputUrl = ref('')

/**
 * ✅ 步骤 0: 获取当前登录用户 ID
 */
const fetchCurrentUserId = async () => {
  try {
    const res = await getCurrentUserId()

    // 假设后端返回 { id: 2 }
    userId.value = res.data.id

    if (!userId.value) {
      console.warn('未获取到当前用户ID，操作被阻止或使用默认值。')
      // 如果后端没有返回 ID，可以阻止操作
      // throw new Error('用户未登录或会话过期');
    }
  } catch (error) {
    console.error('获取当前用户 ID 失败:', error)
    // 错误处理：通常是 401 UNAUTHORIZED，可以跳转到登录页
    alert('用户会话过期或未登录，请先登录。')
    // 临时赋值一个 ID 用于开发调试 (请在生产中移除)
    userId.value = 2
  }
}

/**
 * 实际调用 API 获取模板和纹理详情
 */
const fetchDetails = async () => {
  if (!templateId.value || !textureId.value) {
    console.error('缺少模板或纹理ID，无法加载详情。')
    loading.value = false
    return
  }

  loading.value = true

  try {
    // 1. 获取模板详情
    const templateRes = await getTemplateDetails(templateId.value)
    templateDetails.value = templateRes.data

    // 2. 获取纹理详情
    const textureRes = await getTextureDetails(textureId.value)
    textureDetails.value = textureRes.data
  } catch (error) {
    console.error('加载详情失败:', error)
    alert('加载模板或纹理详情失败，请检查网络或API。')
  } finally {
    loading.value = false
  }
}

/**
 * ✅ 真实逻辑：截图 DOM 元素并上传至服务器
 * @returns {Promise<string>} 上传后返回的图片 URL
 */
const generateFinalOutputUrl = async () => {
  // 截图的是 .canvas-content-wrapper 元素，以避免截图到边框和阴影
  const containerToCapture =
    canvasContainerRef.value.querySelector('.canvas-content-wrapper') || canvasContainerRef.value

  if (!containerToCapture) {
    throw new Error('Canvas 容器未找到，无法截图。')
  }

  // 1. 使用 html2canvas 截图 DOM 元素
  const canvas = await html2canvas(containerToCapture, {
    useCORS: true, // 允许使用跨域图片，很重要！
    scale: 2, // 提高截图分辨率
    backgroundColor: '#ffffff', // 明确设置背景色为白色
  })

  // 2. 将 Canvas 转换为 Blob
  return new Promise((resolve, reject) => {
    canvas.toBlob(
      async (blob) => {
        if (!blob) {
          return reject(new Error('截图失败，无法转换为 Blob。'))
        }

        const fileName = `creation_${userId.value}_${Date.now()}.png`

        // 3. 调用上传 API
        try {
          const res = await uploadImageApi(blob, fileName)
          // 假设后端返回的数据结构是 { data: { url: '...' } }
          resolve(res.data.url)
        } catch (uploadError) {
          // 检查是否有 response.data 以获取后端错误信息
          const backendMsg = uploadError.response?.data?.message || uploadError.message
          reject(new Error(`图片上传失败: ${backendMsg}`))
        }
      },
      'image/png',
      0.9, // 压缩质量
    )
  })
}

/**
 * 处理保存创作结果
 */
const handleSaveCreation = async () => {
  if (isSaving.value) return

  isSaving.value = true
  saveMessage.value = '正在生成和上传最终创作结果...'
  saveStatus.value = ''

  try {
    // 1. ✅ 调用真实生成并上传 URL 的函数
    const generatedUrl = await generateFinalOutputUrl()
    finalOutputUrl.value = generatedUrl

    // 2. 组装最终的保存数据
    const creationData = {
      userId: userId.value,
      templateId: templateId.value,
      textureId: textureId.value,
      customizationData: customizationData.value, // 🚨 字段名与后端实体保持一致
      finalOutputUrl: finalOutputUrl.value, // ✅ 使用上传后返回的真实 URL
    }

    // 3. 调用保存 API
    console.log('发送给后端的数据:', creationData)
    const res = await saveUserCreation(creationData)
    saveMessage.value = res.data
    saveStatus.value = 'success'
    console.log('保存成功:', res.data)
  } catch (error) {
    // 统一处理上传和保存的错误
    saveMessage.value = `保存失败: ${error.message}`
    saveStatus.value = 'error'
    console.error('保存创作失败:', error)
  } finally {
    isSaving.value = false
  }
}

onMounted(async () => {
  await fetchCurrentUserId() // 确保先拿到用户 ID
  fetchDetails()
})
</script>

<style scoped>
/* 样式保持不变，只添加一个 template-image 样式以增强预览 */
/* 基础布局 */
.creation-editor-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
}

.header {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.editor-main-area {
  display: flex;
  gap: 20px;
}

/* 左侧画布容器 */
.editor-canvas-container {
  flex: 3; /* 占据更多空间 */
  min-width: 0;
}

.section-title {
  margin-bottom: 15px;
  color: #333;
  border-left: 4px solid #007bff;
  padding-left: 10px;
}

/* 画布样式 */
.editor-canvas {
  background-color: white; /* 画布的白色背景 */
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  height: 700px; /* 设定一个高大的画布区域 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.canvas-content-wrapper {
  width: 80%;
  height: 80%;
  border: 2px dashed #ccc;
  position: relative;
}

/* 模板中心元素 */
.template-center {
  width: 60%;
  height: 60%;
  background-color: #f0f8ff; /* 模拟模板的颜色 */
  border: 3px solid #007bff;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
  flex-direction: column;
}

.template-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  margin-top: 10px;
}

/* 纹理角元素 */
.texture-corner {
  position: absolute;
  width: 80px;
  height: 80px;
  background-size: cover;
  background-position: center;
  border: 2px solid #28a745;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

/* 纹理角定位 */
.top-left {
  top: 10px;
  left: 10px;
}
.top-right {
  top: 10px;
  right: 10px;
}
.bottom-left {
  bottom: 10px;
  left: 10px;
}
.bottom-right {
  bottom: 10px;
  right: 10px;
}

.label {
  position: absolute;
  bottom: -20px;
  font-size: 10px;
  color: #555;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 1px 4px;
  border-radius: 3px;
}

/* 右侧边栏 */
.editor-sidebar {
  flex: 1; /* 占据剩余空间 */
  min-width: 300px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.info-card {
  background-color: #fff;
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 6px;
}

.info-card h3 {
  margin-top: 0;
  color: #007bff;
  border-bottom: 1px dashed #eee;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.settings-panel {
  margin-bottom: 20px;
}

.settings-panel textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

/* 按钮和消息 */
.btn-save {
  width: 100%;
  padding: 12px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.btn-save:hover:not(:disabled) {
  background-color: #1e7e34;
}

.btn-save:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.success-msg {
  color: #28a745;
  margin-top: 10px;
  font-weight: bold;
}

.error-msg {
  color: #dc3545;
  margin-top: 10px;
  font-weight: bold;
}
</style>
